/*
 * @ddescription: 企业后台自营订单列表/批量发货
 * @Author: along
 * @Date: 2020-10-27
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-09 14:10:48
 */
<template>
    <div class="logisticeGoods">
        <el-dialog
            title="批量发货"
            :visible.sync="dialogbatchGoods"
            width="614px"
            :close-on-click-modal="false"
        >
            <el-form
                ref="ruleFormDelive"
                label-width="100px"
                class="demo-ruleForm"
                label-position="top"
                hide-required-asterisk
            >
                <el-form-item
                    label="文件:"
                    prop="fileList"
                    class="el-item-list el-border-list"
                >
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :http-request="fnUploadFile"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :before-upload="beforeUpload"
                        accept=".csv"
                        multiple
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                        style="margin-left: 15px;margin-bottom:15px;"
                    >
                        <el-button
                            size="small"
                            type="primary"
                        >
                            点击上传
                        </el-button>
                        <div
                            slot="tip"
                            class="el-upload__tip"
                        >
                            *文件类型需只能选择：CSV格式文件
                        </div>
                    </el-upload>
                </el-form-item>
                <p class="el-item-text">
                    <span>请按以下模版,填写物流信息并上传</span>
                    <span style="color: red">注意运单号不要写成E+22科学计数法</span>
                </p>
                <p
                    class="el-item-upload"
                    @click="fnDownLoad"
                >
                    下载批量发货模版
                </p>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    size="small"
                    @click="fnDeliveGoods('ruleFormDelive')"
                >
                    确认上传
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'LogisticeGoods',
    data () {
        return {
            dialogbatchGoods: false,
            fileList: [],
            file: '',
            fileType: ''
        };
    },
    mounted () {},
    methods: {
        /**
         * @description 打开弹窗
         */
        show () {
            this.dialogbatchGoods = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogbatchGoods = false;
        },

        /**
         * @description 选择文件
         */
        fnUploadFile (event) {
            let file = event.file;
            let form = new FormData();

            this.file = file;
            form.append("file", file);
            this.form = form;
        },
        handleRemove(file, fileList) {
            this.file = '';
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        beforeUpload (file) {
            this.fileType = file.name.split('.')[1];
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件`);
        },

        /**
         * 下载模版
         */
        fnDownLoad () {
            window.open('//cdn.zsdx.cn/wei/file/import_tracking_no_tmpl.csv');
        },

        /**
         * 确认发货
         */
        fnDeliveGoods () {
            if (this.file == '') {
                this.$notify({
                    title: '警告',
                    message: '请先选择文件,不可以为空',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }
            if (this.fileType !== 'csv') {
                this.$notify({
                    title: '警告',
                    message: '暂时仅支持csv格式文件，请使用模板',
                    duration: 2000,
                    type: 'warning'
                });
                this.dialogbatchGoods = !this.dialogbatchGoods;
                return;
            }

            this.$upload('/stuhire_shop/ShopGoodsOrder/importTrackingNo',this.form).then(resp => {
                if (resp.code == 1) {
                    this.dialogbatchGoods = !this.dialogbatchGoods;
                    if (resp.data.fail_count > 0) {
                        this.$notify({
                            title: '警告',
                            message: `${resp.data.fail_count}个订单发货失败，请查看待发货订单并重新发货`,
                            duration: 2000,
                            type: 'warning'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '批量发货成功',
                            duration: 500,
                            type: 'success'
                        });
                    }
                    this.$emit('update');//触发表格数据更新
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.logisticeGoods {
    .el-item-text {
        border-top: 1px rgba(0,0,0,.1) solid;
        padding-top: 15px;
    }
  .el-item-list {
        display: flex;
        width: 100%;
        margin-bottom: 0px !important;
       .uploadBtn {
            color: #409EFF;
            margin-left: 20px;
            position: relative;
            &::before {
                content: '*';
                position: absolute;
                left: -8px;
                top: 0;
                font-size: 17px;
                color: red;
            }
        }
    }
    .el-item-upload {
        color: #409EFF;
        cursor: pointer;
        margin-top: 20px;
    }
}
</style>